.flex {
  display: flex;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.align-center {
  align-items: center;
  align-content: center;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.pointer {
  cursor: pointer;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}
.text-gray {
  color: #606266;
}
.text-red {
  color: red !important;
}

.red-btn {
  color: #f56c6c;
}
.red-btn:focus,
.red-btn:hover {
  color: #f12e2e;
}
.blue-btn {
  color: #409eff;
}

.blue-btn:focus,
.blue-btn:hover {
  color: #66b1ff;
}

@for $i from 1 through 20 {
  $base: 1;
  $fontsize: $base * $i;
  // 设置字号
  .fs-#{$fontsize} {
    font-size: $fontsize + 0px;
  }
  .p-#{$fontsize} {
    padding: $fontsize + 0px;
  }
  .pt-#{$fontsize} {
    padding-top: $fontsize + 0px;
  }
  .pb-#{$fontsize} {
    padding-bottom: $fontsize + 0px;
  }
  .pr-#{$fontsize} {
    padding-right: $fontsize + 0px;
  }
  .pl-#{$fontsize} {
    padding-left: $fontsize + 0px;
  }
  .m-#{$fontsize} {
    margin: $fontsize + 0px;
  }
  .mt-#{$fontsize} {
    margin-top: $fontsize + 0px;
  }
  .mb-#{$fontsize} {
    margin-bottom: $fontsize + 0px;
  }
  .mr-#{$fontsize} {
    margin-right: $fontsize + 0px;
  }
  .ml-#{$fontsize} {
    margin-left: $fontsize + 0px;
  }
}
